<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <!-- 引入核心的css文件 -->
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.css">
    <!-- 引入图标样式文件 -->
    <link rel="stylesheet" href="./libs/font/bootstrap-icons.css">
    <style>
        .bi {
            font-size: 30px !important;
            cursor: pointer;
            vertical-align: middle;
        }
        .card {
            margin-top: 20px;
        }

        @media (max-width: 768px) {
            .my_logo,
            .my_button ,
            .nick_name , 
            .my_logout{
                display: none !important;
            }
            .my_search {
                width: 100% !important;
            }
        }
        @media (max-width: 992px) {
            .my_logo {
                font-size: 20px;
                margin-right: 15px;
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <!-- 页面头部 -->
            <header class="index-header d-flex bg-info justify-content-between p-5">
                <h2 class="text-white my_logo">千词站</h2>

                <div class="my_search" style="width:60%;"><input class="form-control my_input" type="text" placeholder="搜索"></div>

                <button type="button" class="btn text-white my_button" data-toggle="modal" data-target="#exampleModal">
                    登录
                </button>
                <button class="btn btn-md my_logout_button " style="display: none;">
                    <span class="my_logout btn-danger p-1 rounded">退出</span>
                    <span class="nick_name text-white">admin</span>
                </button>

            </header>

            <!-- 页面主体 -->
            <section class="index-main mt-5">
                <h3>Web前端英文词汇</h3>
                <!-- 栅格系统布局 -->
                 <!-- <i class="bi bi-volume-up"></i> -->
                 <div class="row my_words">
                    <!-- <div class="col-md-3 col-sm-4">
                            <div class="card">
                                <div class="card-body">
                                    <div>
                                        <span>词汇</span>
                                        <i class="bi bi-volume-down"></i>
                                        <span>音标</span>
                                        
                                        <span>翻译</span>
                                    </div>
                                    <div>
                                        <span>词义</span>
                                    </div>
                                    <div>
                                        <span>句子</span>
                                        <i class="bi bi-volume-down"></i>
                                    </div>
                                    <div>
                                        句子翻译
                                    </div>
                                </div>
                            </div>
                    </div> -->
                 </div>
            </section>

            <!-- 页面尾部（分页） -->
            <section class="index-footer  mt-5">
                <nav>
                    <ul class="pagination pagination-md my_pagination">
                        <li class="page-item active">
                            <span class="page-link">1</span>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                    </ul>
                </nav>
            </section>
        </div>
    </div>

    <!-- 登录弹窗 -->
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">账号登录</h5>
                    <button type="button" class="close" data-dismiss="modal" >
                        <span >&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- 表单 -->
                    <div>
                        <input type="text" class="form-control my_acc" placeholder="请输入账号">
                    </div>
                    <!-- mt-3 margin-top: 3rem; -->
                    <div class="mt-3">
                        <input type="password" class="form-control my_pwd" placeholder="请输入密码">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary my_login_button">登录账号</button>
                </div>
            </div>
        </div>
    </div>



    <!-- 引入jquery文件 -->
    <script src="./libs/jquery/jquery.min.js"></script>
    <!-- 引入bootstrap核心JS文件 -->
    <script src="./libs/bootstrap/js/bootstrap.bundle.js"></script>
    <!-- 引入工具函数 -->
     <script src="./utils/speak.js"></script>
    <!-- 引入cookie文件 -->
     <script src="./utils/cookie.js"></script>
       <!-- 引入配置文件 -->
       <script src="./config/index.js"></script>
    <!-- 引入index.js自己的脚本文件 -->
    <script src="./javascripts/index.js"></script>

</body>

</html>